<script setup>
defineOptions({
  name: "cloudPrintCard"
});

const props = defineProps({
  product: {
    type: Object
  }
});

const emit = defineEmits([
  "EditAppliances",
  "FavoriteAppliances",
  "unbundleAppliances"
]);

const handleEditAppliances = product => {
  emit("EditAppliances", product);
};
const handleFavoriteAppliances = product => {
  emit("FavoriteAppliances", product);
};
const handleunbundleAppliances = product => {
  emit("unbundleAppliances", product);
};
</script>

<template>
  <el-card class="mb-5 w-[100%]">
    <template #header>
      <div class="flex justify-between">
        <div class="list-card-item_detail--name i">
          <iconifyIconOnline class="inline-block m-1" icon="ep:printer" />
          便携式打印机
        </div>
        <div class="list-card-item_detail--name text-green-500">在线</div>
      </div>
    </template>
    <div class="list-card-item_detail--opt">
      <div class="flex items-center justify-between">
        <span>mis:</span>
        <span>xxxxxxxxxxxx</span>
      </div>
      <div class="flex items-center justify-between">
        <span>sn码:</span>
        <span>xxxxxxxxxxxx</span>
      </div>
      <div class="flex items-center justify-between">
        <span>品牌:</span>
        <span>xxxxxxxxxxxx</span>
      </div>
    </div>
    <template #footer>
      <div class="flex cursor-pointer">
        <div
          class="btn hover:text-indigo-400 w-1/4 flex justify-center items-center"
          @click="handleEditAppliances(product)"
        >
          <iconify-icon-online icon="ep:edit-pen" class="ml-1 mr-1" />
          编辑
        </div>
        <div
          class="btn hover:text-indigo-400 w-2/4 flex justify-center items-center"
          @click="handleFavoriteAppliances(product)"
        >
          <iconify-icon-online icon="eos-icons:multistate" class="ml-1 mr-1" />
          状态查询
        </div>
        <div
          class="btn hover:text-indigo-400 w-1/4 flex justify-center items-center"
          @click="handleunbundleAppliances(product)"
        >
          <iconify-icon-online
            icon="eos-icons:volume-binding-outlined"
            class="ml-1 mr-1"
          />
          解绑
        </div>
      </div>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.el-card ::v-deep .el-card__header {
  padding: 10px;
}

.el-card ::v-deep .el-card__footer {
  padding: 0;
}

.el-card ::v-deep .el-card__body {
  padding: 5px 15px;
}

.btn {
  padding: 5px 0;
  margin: 5px 0;
  font-size: 15px;
  border-right: 2px solid #e5e7ec;
}

.btn:last-child {
  border-right: 0 solid #e5e7ec;
}

.list-card-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;

  &_detail {
    flex: 1;
    min-height: 140px;
    padding: 15px 20px;

    &--name {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 400;
    }

    &--opt {
      font-size: 15px;
      line-height: 30px;
    }
  }
}
</style>
